<template>
  <div class="statistics">
    <a-card
      :bordered="false"
      style="border-radius: 8px; margin-bottom: 5px;"
      :bodyStyle="{ padding: '16px 20px 20px 25px' }"
    >
      <a-row type="flex" justify="space-between" :gutter="[12, 13]">
        <a-col :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
          <div class="topheader">
            <div class="title">本月预估消耗费用（元）</div>
            <div class="price flex row_left col_center">
              ￥
              <countTo :startVal="startVal" :decimals="2" :endVal="parseFloat(info.month_price)" :duration="3000">
              </countTo>
            </div>
            <div class="title" style="color:rgba(251, 251, 251, 0.8);font-size: 14px;">上月预估消耗(元)
              <countTo :startVal="startVal" :decimals="2" :endVal="parseFloat(info.top_price)" :duration="3000">
              </countTo>
            </div>
          </div>
          <div class="infolist flex row_bet col_center">
            <div class="flex row_bet col_center">
              <div class="infoli" style="background-color: #fa8c16;"></div>
              <div class="tips">大淘客上单数（本月/上月）</div>
            </div>
            <div class="rightt">
              <span class="num">
                <!--                <countTo-->
                <!--                    :startVal="startVal"-->
                <!--                    :decimals="2"-->
                <!--                    :endVal="parseFloat(info.month_preServiceFee)"-->
                <!--                    :duration="3000"-->
                <!--                >-->
                <!--                </countTo>-->
                {{ info.month_dtk_num }} / {{ info.top_dtk_num }}
              </span>
              个
            </div>
          </div>
          <div class="infolist flex row_bet col_center">
            <div class="flex row_bet col_center">
              <div class="infoli" style="background-color: #36cfc9;"></div>
              <div class="tips">实惠猪上单数（本月/上月）</div>
            </div>
            <div class="rightt">
              <span class="num">
                {{ info.month_shz_num }} / {{ info.top_shz_num }}
              </span>
              个
            </div>
          </div>
          <div class="infolist flex row_bet col_center">
            <div class="flex row_bet col_center">
              <div class="infoli" style="background-color: #ff85c0;"></div>
              <div class="tips">好单库上单数（本月/上月）</div>
            </div>
            <div class="rightt">
              <span class="num">
                {{ info.month_hdk_num }} / {{ info.top_hdk_num }}
              </span>
              元
            </div>
          </div>
        </a-col>
        <a-col :xl="18" :lg="24" :md="24" :sm="24" :xs="24">
          <div class="card_title" style="margin-bottom: 29px; font-size: 14px; margin-left: 40px;">平台上单数量统计</div>
          <div>
            <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding="[23, 23, 23, 60]">
              <v-tooltip/>
              <v-axis/>
              <v-legend position="top-right"/>
              <v-bar position="日期*数据" color="name" :adjust="adjust"/>
            </v-chart>
          </div>
        </a-col>
      </a-row>
    </a-card>
    <div class="bottable" style="margin-top: 25px">
      <div class="flex row_bet col_center">
        <div class="card_title">
          员工概览
        </div>
        <div>
          <a-range-picker
            :ranges="{
              本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
              上周: [
                moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                moment().subtract(parseInt(moment().format('d')), 'days')
              ],
              本月: [
                moment()
                  .month(moment().month())
                  .startOf('month'),
                moment()
                  .month(moment().month())
                  .endOf('month')
              ],
              上月: [
                moment(
                  moment()
                    .subtract(1, 'month')
                    .format('YYYY-MM') + '-01'
                ),
                moment(
                  moment()
                    .subtract(1, 'month')
                    .format('YYYY-MM') + '-01'
                )
                  .subtract(-1, 'month')
                  .add(-1, 'days')
              ],
              半年: [
                moment()
                  .startOf('day')
                  .subtract(6, 'month'),
                moment()
              ]
            }"
            format="YYYY-MM-DD"
            @change="passChange"
            style="width:230px;margin-right: 5px;margin-bottom: 5px;"
          >
            <div
              class="flex row_around col_center"
              style="height:30px;border: 1px solid rgb(232, 233, 234);border-radius: 4px;background-color: #ffffff">
              <span class="m_l_10">{{ pass }}</span>
              <a-icon type="calendar" style="float: right;"/>
            </div>
          </a-range-picker>
        </div>
      </div>
      <div style="margin-top: 10px">
        <a-table
          :columns="columns"
          :rowKey="(item,index) => index"
          :dataSource="grounddata"
          :loading="loading"
          :pagination="false"
        >
          <!--          <div slot="index" slot-scope="text, row, index">-->
          <!--            <span-->
          <!--              class="index"-->
          <!--              :style="{-->
          <!--                backgroundColor: index < 3 ? '#314659' : '#f5f5f5',-->
          <!--                color: index < 3 ? '#ffffff' : '#101010',-->
          <!--              }"-->
          <!--            >{{ index + 1 }}</span-->
          <!--            >-->
          <!--          </div>-->
          <div slot="activity" slot-scope="text, row">
            <a-button type="link" @click="godetail(row)">详情</a-button>
          </div>
        </a-table>
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment'
  import countTo from 'vue-count-to'
  import { getWebPaoDanList, getWebUserTopNum } from '@/api/admin/skipper'

  export default {
    name: 'Statistics',
    components: {
      countTo
    },
    data () {
      return {
        moment,
        sort: '1',
        data: [],
        scale: [
          {
            dataKey: 'time'
          }
        ],
        startVal: 0,
        height: 400,
        adjust: [
          {
            type: 'dodge',
            marginRatio: 1 / 50
          }
        ],
        loading: false,
        realList: [
          // {
          //   user: '从雪艳言', // 用户
          //   is_serviceFee: 1.77, // 预估服务费，，
          //   is_alipayFee: 17.73, // 销售额
          //   is_goodsNum: '10' // 成交单数
          // }
        ],
        columns: [
          {
            title: '用户',
            align: 'center',
            dataIndex: 'user',
            scopedSlots: { customRender: 'user' }
          },
          {
            title: '上单商品数',
            align: 'center',
            dataIndex: 'all_num',
            scopedSlots: { customRender: 'all_num' }
          },
          {
            title: '大淘客',
            align: 'center',
            dataIndex: 'dtk_num',
            scopedSlots: { customRender: 'dtk_num' }
          },
          {
            title: '实惠猪',
            align: 'center',
            dataIndex: 'shz_num',
            scopedSlots: { customRender: 'shz_num' }
          },
          {
            title: '好单库',
            align: 'center',
            dataIndex: 'hdk_num',
            scopedSlots: { customRender: 'hdk_num' }
          },
          {
            title: '出单服务费',
            align: 'center',
            dataIndex: 'pd_issue_service_fee',
            scopedSlots: { customRender: 'pd_issue_service_fee' }
          },
          {
            title: '单品收益',
            align: 'center',
            dataIndex: 'find_profit',
            scopedSlots: { customRender: 'find_profit' }
          },
          {
            title: '操作',
            align: 'center',
            dataIndex: 'activity',
            scopedSlots: { customRender: 'activity' }
          }
        ],
        start: null,
        end: null,
        pass:
          moment().startOf('month').format('YYYY-MM-DD') +
          ' 至 ' +
          moment().format('YYYY-MM-DD'),
        grounddata: [
          // {
          //   user: '从雪艳', // 用户
          //   dtk_num: 2, // 大淘客上单数
          //   shz_num: 2, // 实惠猪上单数
          //   hdk_num: 0, // 好单库上单数
          //   pd_issue_service_fee: '0.00', // 上单商品出单服务费
          //   all_num: 4, // 上单总数
          //   find_profit: 0 // 单品收益
          // }
        ],
        info: {
          month_dtk_num: 2, // 本月大淘客上单数
          month_shz_num: 2, // 本月实惠猪上单数
          month_hdk_num: 0, // 本月好单库上单数
          top_dtk_num: 0, // 上月大淘客上单数
          top_hdk_num: 0, // 上月月好单库上单数
          top_shz_num: 0, // 上月实惠猪上单数
          month_price: 40, // 本月消耗
          top_price: 0 // 上月消耗
        }
      }
    },
    computed: {},
    created () {
      this.start = moment().startOf('month').unix()
      this.end = moment().endOf('month').unix()
      this.getWebPaoDanList()
      this.getWebUserTopNum()
    },
    mounted () {
    },
    methods: {
      getWebUserTopNum () {
        getWebUserTopNum({
          start: this.start,
          end: this.end
        }).then(res => {
          console.log(res)
          this.grounddata = res.data
        }).catch(err => {
          console.log(err)
        })
      },
      passChange (dates, dateStrings) {
        // console.log('From: ', dates[0], ', to: ', dates[1])
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        this.start = dates[0].unix()
        this.end = dates[1].unix()
        console.log(this.start, this.end)
        this.getWebUserTopNum()
        const str = moment(dateStrings[0]).format('YYYY-MM-DD') + ' 至 ' + moment(dateStrings[1]).format('YYYY-MM-DD')
        this.pass = str
      },
      // 数组提取
      getArrayKey (array, key, isparse) {
        var resc = []
        if (array) {
          for (let i = 0; i < array.length; i++) {
            if (isparse) {
              resc.push(Number(array[i][key])) // 是否转类型
            } else {
              resc.push(array[i][key])
            }
          }
        }
        // 使用: this.getArrayKey(array, "key");
        return resc
      },
      getWebPaoDanList () {
        getWebPaoDanList()
          .then((res) => {
            console.log(res)
            this.info = res.data

            const time = this.getArrayKey(res.data.group, 'time')
            // console.log(time)
            // bar 使用不了 - 和 / 所以替换下
            for (const i in time) {
              time[i] = moment(time[i]).format('MM_DD')
            }
            // console.log(time)
            time.reverse()
            const dtknum = this.getArrayKey(res.data.group, 'dtk_num', true) // 预估
            dtknum.reverse()
            const shznum = this.getArrayKey(res.data.group, 'shz_num', true)
            shznum.reverse()
            const hdknum = this.getArrayKey(res.data.group, 'hdk_num', true)
            hdknum.reverse()
            const Name = ['大淘客', '实惠猪', '好单库']
            const arr = []
            const obj = {}
            const obj2 = {}
            const obj3 = {}
            for (let i = 0; i < dtknum.length; i++) {
              obj.name = Name[0]
              const key = time[i]
              obj[key] = dtknum[i]
              // console.log('obj', obj)
            }
            arr.push(obj)
            for (let i = 0; i < shznum.length; i++) {
              obj2.name = Name[1]
              const key = time[i]
              obj2[key] = shznum[i]
              // console.log('obj', obj)
            }
            arr.push(obj2)
            for (let i = 0; i < hdknum.length; i++) {
              obj3.name = Name[2]
              const key = time[i]
              obj3[key] = hdknum[i]
              // console.log('obj', obj)
            }
            arr.push(obj3)
            // console.log('arr', arr)
            const DataSet = require('@antv/data-set')
            const dv = new DataSet.View().source(arr)
            dv.transform({
              type: 'fold',
              fields: time,
              key: '日期',
              value: '数据'
            })
            this.data = dv.rows
            // console.log('this.data', this.data)
          })
          .catch((err) => {
            console.log(err)
          })
      }
    }
  }
</script>
<style lang="less" scoped>
  .statistics {
    .card_title {
      color: #101010;
      font-size: 20px;
      font-weight: 600;
    }

    p {
      margin: 0;
    }

    .topheader {
      width: 100%;
      /*height: 100px;*/
      background-color: #1890ff;
      border-radius: 6px;
      box-shadow: 0px 2px 6px 0px rgb(64, 169, 255);
      text-align: center;
      padding: 14px;

      .title {
        font-size: 14px;
        color: #fbfbfb;
        text-align: left;
      }

      .price {
        text-align: left;
        font-size: 36px;
        color: #fbfbfb;
      }
    }

    .infolist {
      margin-top: 18px;
      height: 29px;

      .infoli {
        width: 8px;
        height: 28px;
        border-radius: 2px;
        margin-right: 14px;
      }

      .tips {
        color: #404040;
        font-size: 14px;
      }

      .num {
        color: #404040;
        font-size: 25px;
        font-weight: 600;
      }

      .rightt {
        display: table-cell;
        vertical: bottom;
      }
    }

    .card {
      padding: 15px;

      .realtime {
        width: 100%;

        .realtitle {
          color: #101010;
          border-radius: 3px;
          font-size: 14px;
          background-color: #f5f5f5;
          border: 1px solid rgba(217, 217, 217, 100);
          margin-top: 14px;

          .spans {
            width: 20%;
            text-align: center;
          }
        }
      }

      .realli {
        border: 1px solid rgba(217, 217, 217, 100);
        border-top: none;
      }
    }

    .index {
      background-color: #f5f5f5;
      border-radius: 20px;
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      /*margin-right: 24px;*/
      height: 20px;
      line-height: 20px;
      width: 20px;
      text-align: center;
    }
  }
</style>
